<extend name="Base/base" />

<block name="main">
    <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            <i class="fa fa-calendar"></i>
			       会员管理
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">会员管理</a></li>
            <li class="active">编辑会员信息</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <!-- right column -->
            <div class="col-md-12">
              <!-- Horizontal Form -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title"><i class="fa fa-plus"></i> 编辑会员信息</h3>
                </div><!-- /.box-header -->
                <!-- form start -->
                <form class="form-horizontal" action="__CONTROLLER__/update" method="post" onsubmit="return doSubmit()" enctype="multipart/form-data">
                  <input type="hidden" value="{$user.id}" name="id">
                  <div class="box-body">
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">用户名</label><span style="font-size:12px;color:#fc0;" id="user"></span>
                      <div class="col-sm-4">
                        <input type="input" class="form-control" name="username" placeholder="UserName" onblur="checkUserName()" onfocus="checkUser()" value="{$user.username}">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">昵称</label><span style="font-size:12px;color:#fc0;" id="name" ></span>
                      <div class="col-sm-4">
                        <input type="input" class="form-control" name="name" placeholder="UserName" value="{$user.name}"  onfocus="checkFName()" onblur="checkName()">
                      </div>
                    </div>
                     <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">性别</label><span style="font-size:12px;color:#fc0;" id="sex"></span>
                      <div class="col-sm-4">
                        <input type="radio" name="sex"  value="1" <eq name="user.sex" value="1">checked</eq>>男
                        <input type="radio" name="sex"  value="0" <eq name="user.sex" value="0">checked</eq>>女
                        <input type="radio" name="sex"  value="" <eq name="user.sex" value="">checked</eq>>未知
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">电话</label><span style="font-size:12px;color:#fc0;" id="phone"></span>
                      <div class="col-sm-4">
                        <input type="input" class="form-control" name="phone" placeholder="Phone" value="{$user.phone}"  onfocus="checkFPhone()" onblur="checkPhone()">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label><span style="font-size:12px;color:#fc0;" id="email"></span>
                      <div class="col-sm-4">
                        <input type="email" class="form-control" name="email" placeholder="Email" onblur="checkEmail()" onfocus="checkEm()" value="{$user.email}">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">身份</label><span style="font-size:12px;color:#fc0;" id="user"></span>
                      <div class="col-sm-4">
                        <input type="radio" name="state"  value="1" onclick="pu()"<eq name="user.state" value="1" >checked</eq>>管理员                       
                        <input type="radio" name="state"  value="2" onclick="pu()" <eq name="user.state" value="2" >checked</eq>>普通用户
                        <input type="radio" name="state"  value="3" <eq name="user.state" value="3">checked</eq> onclick="shop({$user.state})">商户
                        <input type="radio" name="state"  value="4" <eq name="user.state" value="4">checked</eq> onclick="peisong({$user.state})">配送员
                         <input type="radio" name="state"  value="0" onclick="pu()" <eq name="user.state" value="0" >checked</eq>>禁用
                      </div>
                    </div>
					         <!-- 配送员详细信息 -->
                    <div id="peisong" style="display:none">
                        <div class="form-group">
                          <input type="hidden" name="uid" value="{$user.id}">
                          <label for="inputEmail3" class="col-sm-2 control-label">管辖区域</label><span style="font-size:12px;color:#fc0;" id="area"></span>
                          <div class="col-sm-4">
                             <select class="form-control" name="area">
                                <option value="0">--请选择辖区--</option>
                                <option value="1">小店区</option>
                                <option value="2">迎泽区</option>
                                <option value="3">杏花岭区</option>
                                <option value="4">尖草坪区</option>
                                <option value="5">万柏林区</option>
                                <option value="6">晋源区</option>
                              </select>
                          </div>
                        </div>
                    </div>
                    <!-- 商铺详细信息 -->
                    <div id="shop" style="display:none">
                         <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">店铺名</label><span style="font-size:12px;color:#fc0;" id="shopname"></span>
                            <div class="col-sm-4">
                              <input type="input" class="form-control" name="shopname" placeholder="ShopName" onblur="checkShopName()" onfocus="checkShop()">
                            </div>
                          </div>
                          <div class="form-group">
                             <label for="inputEmail3" class="col-sm-2 control-label" for="address">位置</label><span style="font-size:12px;color:#fc0;" id="address"></span>
                            <div class="col-sm-4">
                              <select class="form-control" name="address">
                                <option value="">--请选择区域--</option>
                                <option value="1">小店区</option>
                                <option value="2">迎泽区</option>
                                <option value="3">杏花岭区</option>
                                <option value="4">尖草坪区</option>
                                <option value="5">万柏林区</option>
                                <option value="6">晋源区</option>                   
                              </select>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">详细地址</label><span style="font-size:12px;color:#fc0;" id="detail_add"></span>
                            <div class="col-sm-4">
                              <input type="input" class="form-control" name="detail_add" placeholder="DetailAddress" value="{$addr.detail_add}"  onfocus="checkFDtail()" onblur="checkDtail()">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">经营范围</label><span style="font-size:12px;color:#fc0;" id="kind"></span>
                            <div class="col-sm-4">
                              <select class="form-control" name="kind">
                                <option value="">--请选择类别--</option>
                                <foreach name='kind' item='vo'>
                                <option value="{$vo.id}">{$vo.classname}</option>    
                                </foreach>               
                              </select>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">商户类型</label><span style="font-size:12px;color:#fc0;" id="shoptype"></span>
                            <div class="col-sm-4">
                              <input type="radio" name="shoptype"  value="1" checked>个体商户
                              <input type="radio" name="shoptype"  value="0" >企业商户
                            </div>
                          </div>
                          
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">图片信息</label><span style="font-size:12px;color:#fc0;" id="sex"></span>
                            <div class="col-sm-2">
                              1.店铺门脸图                              
                            </div>
                            <div class="col-sm-2">
                              2.店内环境图
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label"></label><span style="font-size:12px;color:#fc0;" id="tupian"></span>
                            <div class="col-sm-2">
                              <div id="previewDoor">
                                <img id="imgheadDoor" border="0" src="__PUBLIC__/images/photo_icon.png" width="90" height="90" onclick="$('#previewImgDoor').click();">
                             </div>         
                              <input type="file" onchange="previewImage(this,'Door')" style="display: none;" id="previewImgDoor" name="door_pic">
                            </div>
                            <div class="col-sm-2">
                              <div id="previewEnv">
                                <img id="imgheadEnv" border="0" src="__PUBLIC__/images/photo_icon.png" width="90" height="90" onclick="$('#previewImgEnv').click();">
                             </div>         
                              <input type="file" onchange="previewImage(this,'Env')" style="display: none;" id="previewImgEnv" name="env_pic">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">资质信息</label><span style="font-size:12px;color:#fc0;" id="info"></span>
                            <div class="col-sm-4">
                              <input type="radio" name="info"  value="0" checked>营业执照
                              <input type="radio" name="info"  value="1" >餐饮服务许可证
                              <input type="radio" name="info"  value="2" >其他资质
                              <input type="radio" name="info"  value="3" >无资质
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label"></label><span style="font-size:12px;color:#fc0;" id="info"></span>
                            <div class="col-sm-4">
                              <div id="previewInfo">
                                <img id="imgheadInfo" border="0" src="__PUBLIC__/images/photo_icon.png" width="90" height="90" onclick="$('#previewImgInfo').click();">
                             </div>         
                              <input type="file" onchange="previewImage(this,'Info')" style="display: none;" id="previewImgInfo" name="info_pic">
                            </div>                           
                          </div>

                    </div>
                  </div><!-- /.box-body -->
                  <div class="box-footer">
          				    <div class="col-sm-offset-2 col-sm-1">
          						    <button type="submit" class="btn btn-primary">修改</button>
                      </div>
          					  <div class="col-sm-1">
          						    <button type="submit" class="btn btn-primary">重置</button>
          					  </div>
                  </div><!-- /.box-footer -->
                </form>
				        <div class="row"><div class="col-sm-12">&nbsp;</div></div>
              </div><!-- /.box -->
       
            </div><!--/.col (right) -->
          </div>   <!-- /.row -->
        </section><!-- /.content -->
</block>
<block name="myscript">
  <literal>
      <script type="text/javascript">
          //表单提交限制
          function doSubmit() {
            return checkUserName()&&checkEmail()&&checkPhone();
          }
          //检测用户名
          function checkUser() {
            var user = $("input[name='username']").val();
            $("#user").html("账号由5-12位字母、数字或下划线组成");
            $("#user").css("color","#fc0");
          }          
          function checkUserName() {
            var user = $("input[name='username']").val();
            if(user.match(/^[a-zA-Z0-9_]{5,12}$/)==null){
                 $("#user").html("请输入正确的账户格式");
                 $("#user").css("color","red");
                return false;
            }else if(user.match(/(^\_)|(\__)|(\_+$)/)){
                $("#user").html("用户名首尾不能出现下划线\'_\'");
                $("#user").css("color","red");
                return false;
            }else if(user.match(/^\d+\d+\d$/)){
                 $("#user").html("用户名不能全为数字");
                 $("#user").css("color","red");
                return false;
            }else{
                 $("#user").html("");
                 $("#user").css("color","#fc0");
                 return true;
            }

          }
          //检测邮箱
          function checkEm() {
            var email = $("input[name='email']").val();
            $("#email").html("邮箱格式为：xxx@xx.xx");
            $("#email").css("color","#fc0");
          }
          function checkEmail() {
            var email = $("input[name='email']").val();
            if(email.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)==null){
                 $("#email").html("请输入正确的邮箱");
                 $("#email").css("color","red");
                return false;
            }else{
                 $("#email").html("");
                 $("#email").css("color","#fc0");
                 return true;
            }
          }

          //检测name
          function checkFName() {
              $("#name").html("请填写昵称");
              $("#name").css("color","#fc0");
          }
          function checkName() {
              $("#name").html("");
          }
          //检测地址
          function checkFAddr(){
            $("#address").html("请填写您的所在地名称");
            $("#address").css("color","#fc0");
          }
          function checkAddr(){
            $("#address").html("");
            $("#address").css("color","#fc0");
          }
          //检测手机
          function checkFPhone(){
              $("#phone").html("请正确填写电话");
              $("#phone").css("color","#fc0");
          }
          function checkPhone(){
              var phone = $("input[name='phone']").val();
              if (phone) {
                if (phone.match(/^1[34578]\d{9}$/)==null) {
                  $("#phone").html("格式不正确呢");
                  $("#phone").css("color","red");
                  return false;
                }else{
                  $("#phone").html("");
                  $("#phone").css("color","#fc0");
                  return true;
                }
              }else{
                $("#phone").html("");
                return true;
              }
          }

          //选择了配送员
          function peisong(state){
              $("#shop").css("display","none");
              if (state!=4) {
                $("#peisong").css("display","block");
              }
          }
          //选择了商户
          function shop(state){
              $("#peisong").css("display","none");
              if (state!=3) {
                $("#shop").css("display","block");
              }
          }
          //选择
          function pu(){
            $("#peisong").css("display","none");
            $("#shop").css("display","none");
          }

      //图片上传预览    IE是用了滤镜。
        function previewImage(file,name)
        {
          var MAXWIDTH  = 90; 
          var MAXHEIGHT = 90;
          var div = document.getElementById('preview'+name);
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead'+name+' onclick=$("#previewImg'+name+'").click()>';
              var img = document.getElementById('imghead'+name);
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead'+name);
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
      </script>
  </literal>
</block>